<template>
  <div class="personnel-container">
    <el-card>
      <div class="action-header">
        <h2>调动管理</h2>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" @click="showCreateDialog">发起调动申请</el-button>
          <el-button icon="el-icon-download" @click="exportData">导出数据</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <div class="filter-controls">
        <el-input
            v-model="filter.keyword"
            placeholder="搜索姓名/工号"
            clearable
            style="width: 250px; margin-right: 15px;"
        />
        <el-select
            v-model="filter.status"
            placeholder="调动状态"
            clearable
            style="width: 180px; margin-right: 15px;"
        >
          <el-option label="审批中" value="pending" />
          <el-option label="已批准" value="approved" />
          <el-option label="已拒绝" value="rejected" />
        </el-select>
        <el-date-picker
            v-model="filter.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="申请开始日期"
            end-placeholder="申请结束日期"
            value-format="yyyy-MM-dd"
            style="width: 350px; margin-right: 15px;"
        />
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table :data="filteredList" style="width: 100%" height="600">
        <el-table-column prop="name" label="姓名" width="120">
          <template #default="scope">
            <div class="employee-info">
              <el-avatar :size="40" :src="scope.row.avatar" />
              <span style="margin-left: 10px;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="employeeId" label="工号" width="120" />
        <el-table-column label="原部门/职位" width="220">
          <template #default="scope">
            <div>{{ scope.row.originalDepartment }}</div>
            <div>{{ scope.row.originalPosition }}</div>
          </template>
        </el-table-column>
        <el-table-column label="新部门/职位" width="220">
          <template #default="scope">
            <div>{{ scope.row.newDepartment }}</div>
            <div>{{ scope.row.newPosition }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="applyDate" label="申请日期" width="150" />
        <el-table-column prop="transferDate" label="调动日期" width="150" />
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <el-tag :type="statusTagType(scope.row.status)">
              {{ formatStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button
                v-if="scope.row.status === 'pending'"
                size="small"
                type="primary"
                @click="handleApprove(scope.row)"
            >审批</el-button>
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 调动申请对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
      <el-form :model="form" label-width="120px" ref="formRef">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入员工姓名" />
            </el-form-item>
            <el-form-item label="工号" prop="employeeId">
              <el-input v-model="form.employeeId" placeholder="请输入工号" />
            </el-form-item>
            <el-form-item label="原部门" prop="originalDepartment">
              <el-input v-model="form.originalDepartment" placeholder="请输入原部门" />
            </el-form-item>
            <el-form-item label="原职位" prop="originalPosition">
              <el-input v-model="form.originalPosition" placeholder="请输入原职位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="新部门" prop="newDepartment">
              <el-input v-model="form.newDepartment" placeholder="请输入新部门" />
            </el-form-item>
            <el-form-item label="新职位" prop="newPosition">
              <el-input v-model="form.newPosition" placeholder="请输入新职位" />
            </el-form-item>
            <el-form-item label="调动日期" prop="transferDate">
              <el-date-picker
                  v-model="form.transferDate"
                  type="date"
                  placeholder="选择调动日期"
                  value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="调动原因" prop="reason">
          <el-select v-model="form.reason" placeholder="请选择调动原因">
            <el-option label="组织架构调整" value="org_change" />
            <el-option label="个人发展" value="personal" />
            <el-option label="项目需求" value="project" />
            <el-option label="绩效表现" value="performance" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>

        <el-form-item label="详细说明" prop="description">
          <el-input
              v-model="form.description"
              type="textarea"
              :rows="4"
              placeholder="请详细说明调动原因"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交申请</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Transfer',
  setup() {
    const dialogVisible = ref(false)
    const dialogTitle = ref('发起调动申请')
    const formRef = ref(null)

    const form = reactive({
      name: '',
      employeeId: '',
      originalDepartment: '',
      originalPosition: '',
      newDepartment: '',
      newPosition: '',
      transferDate: '',
      reason: '',
      description: ''
    })

    const transferList = ref([
      {
        id: 1,
        name: '张三',
        employeeId: 'EMP001',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        originalDepartment: '技术部/前端组',
        originalPosition: '前端工程师',
        newDepartment: '产品部',
        newPosition: '产品经理',
        applyDate: '2023-05-10',
        transferDate: '2023-06-01',
        reason: '个人发展',
        status: 'pending'
      },
      {
        id: 2,
        name: '李四',
        employeeId: 'EMP002',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        originalDepartment: '技术部/后端组',
        originalPosition: '后端工程师',
        newDepartment: '技术部/架构组',
        newPosition: '高级工程师',
        applyDate: '2023-05-15',
        transferDate: '2023-06-05',
        reason: '绩效表现',
        status: 'approved'
      },
      {
        id: 3,
        name: '王五',
        employeeId: 'EMP003',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        originalDepartment: '市场部',
        originalPosition: '市场专员',
        newDepartment: '销售部',
        newPosition: '销售主管',
        applyDate: '2023-05-20',
        transferDate: '2023-06-10',
        reason: '组织架构调整',
        status: 'rejected'
      }
    ])

    const filter = reactive({
      keyword: '',
      status: '',
      dateRange: []
    })

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(3)

    const filteredList = computed(() => {
      return transferList.value.filter(item => {
        const matchesKeyword = filter.keyword ?
            (item.name.includes(filter.keyword) || item.employeeId.includes(filter.keyword)) : true

        const matchesStatus = filter.status ?
            item.status === filter.status : true

        return matchesKeyword && matchesStatus
      })
    })

    const formatStatus = (status) => {
      const map = {
        pending: '审批中',
        approved: '已批准',
        rejected: '已拒绝'
      }
      return map[status] || status
    }

    const statusTagType = (status) => {
      const map = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
      }
      return map[status] || 'info'
    }

    const showCreateDialog = () => {
      dialogTitle.value = '发起调动申请'
      dialogVisible.value = true
      // 重置表单
      Object.assign(form, {
        name: '',
        employeeId: '',
        originalDepartment: '',
        originalPosition: '',
        newDepartment: '',
        newPosition: '',
        transferDate: '',
        reason: '',
        description: ''
      })
    }

    const handleApprove = (row) => {
      ElMessage.info(`审批调动申请: ${row.name}`)
      // 实际项目中这里会跳转到审批页面
    }

    const handleView = (row) => {
      ElMessage.info(`查看调动详情: ${row.name}`)
      // 实际项目中这里会跳转到详情页面
    }

    const submitForm = () => {
      ElMessage.success('调动申请提交成功')
      dialogVisible.value = false
    }

    const exportData = () => {
      ElMessage.success('数据导出成功')
    }

    const search = () => {
      currentPage.value = 1
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    return {
      dialogVisible,
      dialogTitle,
      formRef,
      form,
      transferList,
      filter,
      currentPage,
      pageSize,
      total,
      filteredList,
      formatStatus,
      statusTagType,
      showCreateDialog,
      handleApprove,
      handleView,
      submitForm,
      exportData,
      search,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.personnel-container {
  padding: 20px;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.filter-controls {
  display: flex;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.employee-info {
  display: flex;
  align-items: center;
}
</style>